// webpack 配置文件
// 导出的是  node的模块

// 导入node内置的 path模块
const path = require("path");

module.exports = {
    entry: "./src/main.js", // 入口文件
    output: {
        filename: "bundle.js", // 导出文件名
        path: path.resolve(__dirname, "./build"), // 导出路径
    },
    // 配置模块
    module: {
        // 配置加载规则
        rules: [
            {
                // 告诉webpack要匹配什么文件
                test: /\.css$/, // 正则表达式
                // 使用的loader 注意使用顺序是从右到左/从下到上
                // 所有使用 style相关的loader  style-loader要在最前面  postcss-loader处理浏览器前缀
                // use: [
                //     {
                //         loader: "style-loader",
                //     },
                //     {
                //         loader: "css-loader",
                //     },
                // ],
                // 简写use 如果有option属性 需要完整写法
                use:["style-loader" , "css-loader" , "postcss-loader"]
            },
            {
                test: /\.less$/, // 正则表达式
                use:["style-loader" , "css-loader" , "less-loader" , "postcss-loader"]
            },
            {
                test: /\.(png|jpe?g|svg|gif)$/, 
                // asset 导出dataUrl
                // asset/resource 发送单独的文件 并导出url
                // asset/inilne 导出一个资源的url 图片压缩为base64
                // asset/source 导出资源的源代码
                type:"asset"
            },
        ],
    },
};
